<!-- 侧边栏 -->
<template>
  <el-aside class="aside">
    <!-- 分栏显示 -->
    <div class="left_sidebar_box" v-if="model === 'default'">
      <!-- logo组件 -->
      <logoImage></logoImage>
      <!-- 侧边栏最左侧 -->
      <sidebarLeft
        @openModel="openModel"
        :menu="menu"
        :leftTagPath="leftTagPath"
      ></sidebarLeft>
    </div>
    <!-- 经典布局 -->
    <div class="right_sidebar_box" :class="{ right_hidden: collapse }" >
      <logoText></logoText>
      <sidebarClassic
        :menu="model === 'default' ? childrenMenu : menu"
      ></sidebarClassic>
    </div>
  </el-aside>
</template>

<script>
import logoText from "./sidebar-logo-text.vue";
import logoImage from "./sidebar-logo-image.vue";
import sidebarClassic from "./sidebar-classic.vue";
import sidebarLeft from "./sidebar-left.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    sidebarClassic,
    sidebarLeft,
    logoImage,
    logoText,
  },
  data() {
    return {
      childrenMenu: [],
      leftTagPath: "",
    };
  },
  computed: mapGetters(["menu", "model", "collapse"]),
  created() {
    this.$store.dispatch("GetMenu").then(() => {
      this.changeMenu();

    });
  },
  watch: {
    $route() {
      this.changeMenu();
    },
  },
  methods: {
    openModel(item) {
      this.childrenMenu = item.children;
    },
    changeMenu() {
      this.$store.dispatch("SetBreadcrumb", this.$route.matched);
      if (this.model === "default") {
        this.leftTagPath = this.$route.matched[0].path;
        for (const key in this.menu) {
          if (this.leftTagPath == this.menu[key].path) {
            this.childrenMenu = this.menu[key].children;
            this.$store.dispatch("UpdateCollapse",this.childrenMenu&& this.childrenMenu.length>0);
          }
        }
      }
      if (!this.collapse) {
        this.childrenMenu = [];
      }
    },
  },
};
</script>
